<script>
import ImageControl from '@/view/v/Controls/ImageControl'
import ViewControl from '@/view/v/Controls/ViewControl'
import TextControl from './TextControlEdit'
import RollTextControl from './RollTextControlEdit'
import VideoControl from '@/view/v/Controls/VideoControl'
import WeatherControl from '@/view/v/Controls/WeatherControl'
import CurrentDateControl from '@/view/v/Controls/CurrentDateControl'
import CountdownControl from '@/view/v/Controls/CountdownControl'
import WebControl from './WebControlEdit'

import DragMove from '@/view/comm/drag/DragMove'
import DragSize from '@/view/comm/drag/DragSize'
import DelControlItemBtn from '@/view/comm/DelControlItemBtn'

import VideoControlAllowSoundBtn from './VideoControlAllowSoundBtn.vue'

import dataApi from '@/view/data-api-edit'

// import autoprefix from '@/modules/corejs/dom-css/autoprefix'
// let transform = autoprefix('transform')
export default {
  render () {
    const { d, index } = this
    const { activeIndex } = dataApi
    let sItem = {
      // [transform]: `translate3d(${d.x}px,${d.y}px,0)`,
      left: d.x + 'px',
      top: d.y + 'px',
      width: d.w + 'px',
      height: d.h + 'px',
      'z-index': d.zIndex
    }

    let vmCont
    let vmOther
    switch (d.type) {
      case 1:
        vmCont = <ImageControl ref="vControl" d={d}/>
        break
      case 2:
        vmCont = <ViewControl ref="vControl" d={d}/>
        break
      case 3:
        vmCont = <TextControl ref="vControl" d={d}/>
        break
      case 4:
        vmCont = <RollTextControl ref="vControl" d={d} index={index}/>
        break
      case 5:
        vmCont = <VideoControl ref="vControl" d={d}/>
        vmOther = <VideoControlAllowSoundBtn d={d} index={index}/>
        break
      case 6:
        vmCont = <CurrentDateControl ref="vControl" d={d}/>
        break
      case 7:
        vmCont = <WeatherControl ref="vControl" d={d}/>
        break
      case 8:
        vmCont = <CountdownControl ref="vControl" d={d}/>
        break
      case 9:
        vmCont = <WebControl ref="vControl" d={d}/>
        break
    }
    vmCont = [
      vmCont,
      <DragMove d={d} onMoveChange={this.onMoveChange}/>,
      <DragSize d={d} onSizeChange={this.onSizeChange} onSizeChangeStart={this.onSizeChangeStart}/>,
      <DelControlItemBtn ref="vDelControlItemBtn" d={d} onMousedown={e => { e.stopPropagation() }} onClick={() => { this.delControlItem(index) }}/>,
      vmOther
    ]

    return <div onMousedown={this.onActive} class={{ 'control-item': true, active: activeIndex === this.index }} style={sItem}>{vmCont}</div>
  },
  props: {
    d: Object,
    index: Number
  },
  mounted () {
    // this.outsideClose = new OutsideClose({
    //   onClose () {
    //     dataApi.activeIndex = -1
    //   }
    // })
  },
  methods: {
    onActive () {
      dataApi.activeItem(this.index)
      // this.$emit('active')
    },
    delControlItem (index) {
      dataApi.delControl(this.index)
    },
    onSizeChange (opt) {
      let { vControl } = this.$refs
      if (vControl.onSizeChange) {
        vControl.onSizeChange(opt)
      }
    },
    onSizeChangeStart () {
      let { vControl } = this.$refs
      if (vControl.onSizeChangeStart) {
        vControl.onSizeChangeStart()
      }
    },
    onMoveChange () {
      let { vDelControlItemBtn } = this.$refs
      vDelControlItemBtn.onMoveChange()
    }
  }
}
</script>

<style scoped src="../v/Controls/index.css"></style>
<style scoped>
/* .control-item {
  outline: 1px dashed #333;
} */
.control-item >>> .tt,
.control-item >>> .ck.ck-editor__editable.ck-focused {
  border: none;
}
.drag-move,
.drag-size,
.del-btn {
  display: none;
}
.control-item:hover {
  outline: 2px solid #0087a9;
}
.control-item.active
{
  outline: 2px solid #0087a9;
  box-shadow: 0px 0px 12px #0087a9;
  background-color: rgba(255, 255, 255, 0.8);
  .drag-move,
  .drag-size,
  .del-btn {
    display: block;
  }
}

</style>
